import { Style, Icon, Text, Fill, Stroke } from 'ol/style'
import { Overlay, Feature } from 'ol'
import { SHENZHEN, AUTHOR_INFO } from '../../constants'

// 示例标注点深圳市的信息对象
export const featuerInfo = {
  geo: SHENZHEN,
  att: {
    // 标注信息的标题内容
    title: AUTHOR_INFO.NAME,
    // 标注详细信息链接
    titleURL: AUTHOR_INFO.JUEJIN,
    // 标注内容简介
    text: `
    <br/>
    年龄：${AUTHOR_INFO.AGE}<br/>
    性别：${AUTHOR_INFO.SEX}<br/>
    目前居住地：${AUTHOR_INFO.LOCATION}<br/>
    QQ：${AUTHOR_INFO.QQ}<br/>
    WX：${AUTHOR_INFO.WX}<br/>
    <br/>
    `,
    // 标注的图片
    imgURL: AUTHOR_INFO.AVATAR
  }
}

/**
 * 创建 Popup
 * @param {HTMLElement} container - Popup 容器
 * @returns {Overlay} - 返回一个 Overlay 实例
 */
export const createPopup = (container) =>
  new Overlay(
    /** @type {olx.OverlayOptions} */
    {
      // 要转换成 overlay 的 HTML 元素
      element: container,
      // 当前窗口可见
      autoPan: true,
      // Popup 放置的位置
      positioning: 'bottom-center',
      // 是否应该停止事件传播到地图窗口
      stopEvent: false,
      autoPanAnimation: {
        // 当 Popup 超出地图边界时，为了 Popup 全部可见，地图移动的速度
        duration: 250
      }
    }
  )

/**
 * 创建矢量标注样式函数，设置 image 为图标 ol.style.Icon
 * @param {Feature} feature - 要素
 * @returns {Style} - 返回一个 Style 实例
 */
export const createLabelStyle = (feature) =>
  new Style({
    image: new Icon(
      /** @type {olx.style.IconOptions} */
      {
        // 设置图标点
        anchor: [0.5, 60],
        // 图标起点
        anchorOrigin: 'top-right',
        // 指定 x 值为图标点的 x 值
        anchorXUnits: 'fraction',
        // 指定 Y 值为像素的值
        anchorYUnits: 'pixels',
        // 偏移
        offsetOrigin: 'top-right',
        // offset: [0, 10],
        // 图标缩放比例
        scale: 0.4,
        // 透明度
        opacity: 0.75,
        // 图标的 url
        src: '/image/blue.png'
      }
    ),
    text: new Text({
      // 位置
      textAlign: 'center',
      // 基准线
      textBaseline: 'middle',
      // 文字样式
      font: 'normal 14px 微软雅黑',
      // 文本内容
      text: feature.get('name'),
      // 文本填充样式（即文字颜色）
      fill: new Fill({ color: '#aa3300' }),
      stroke: new Stroke({ color: '#ffcc33', width: 2 })
    })
  })

/**
 * 动态创建 Popup 的具体内容
 * @param {Object} params - 参数对象
 * @param {Object} params.info - 弹框信息
 * @param {HTMLElement} params.content - 弹框内容节点
 */
export const addFeatrueInfo = ({ info, content }) => {
  // 新增 a 元素
  const elementA = document.createElement('a')
  elementA.className = 'markerInfo'
  elementA.href = info.att.titleURL
  setInnerText(elementA, info.att.title)
  // 新建的 div 元素添加 a 子节点
  content.appendChild(elementA)

  // 新增 div 元素
  const elementDiv = document.createElement('div')
  elementDiv.className = 'markerText'
  elementDiv.innerHTML = info.att.text
  // 为 content 添加 div 子节点
  content.appendChild(elementDiv)

  // 新增 img 元素
  const elementImg = document.createElement('img')
  elementImg.className = 'markerImg'
  elementImg.src = info.att.imgURL
  // 为 content 添加 img 子节点
  content.appendChild(elementImg)
}

/**
 * 动态设置元素文本内容（兼容）
 * @param {HTMLElement} element - HTML 元素
 * @param {string} text - 文本内容
 */
function setInnerText(element, text) {
  if (typeof element.textContent === 'string') {
    element.textContent = text
  } else {
    element.innerText = text
  }
}
